<template>
	<div class="mainWrapper Adjustment">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-caiwu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>人才结算管理</el-breadcrumb-item>
			<el-breadcrumb-item>结算通道</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="content_Box box-shadow">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="20" class="fr" style="height: 30px;"> </el-col>
				</el-row>
			</div>

			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="ListData" stripe>
						<el-table-column prop="id" label="序号" width="50px" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="结算通道名称" width="180px"> </el-table-column>
						<el-table-column prop="company_name" label="签约公司" width="220px"></el-table-column>
						<el-table-column prop="tax_source" label="税源地名称" width="200px"></el-table-column>
						<el-table-column prop="bank_card" label="账号" width="160px"></el-table-column>
						<el-table-column prop="balance" label="余额" width="120px" align="right">
							<template slot-scope="{ row, $index }">
								<span style="color: red;">{{ row.balance }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="rate" label="费率" width="100px" align="right">
							<template slot-scope="{ row, $index }">
								<span>{{ row.rate }}%</span>
							</template>
						</el-table-column>
						<el-table-column prop="sign_date_start" label="签约日期" width="150px"> </el-table-column>
						<el-table-column prop="sign_date_end" label="终止日期" width="150px"> </el-table-column>
						<el-table-column prop="type" label="类型" width="80px">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.type == '1'">平台</span>
								<span class="text-warning" v-if="row.type == '2'">三方</span>
							</template>
						</el-table-column>
						<el-table-column prop="is_default" label="是否默认" width="80px">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.is_default == '1'">是</span>
								<span class="text-danger" v-if="row.is_default == '2'">否</span>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="状态" width="80px">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.status == '1'">开启</span>
								<span class="text-danger" v-if="row.status == '2'">停用</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" fixed="right" width="250px">
							<template slot-scope="{ row, $index }">
								<el-link :underline="false" class="InfoFont" style="color: #2c4198;" @click="toEdit(row)">编辑</el-link>
								<el-link
									:underline="false"
									class="InfoFont"
									:style="{ color: row.is_default == 2 ? 'green' : 'var(--red1)' }"
									@click="changeDefault(row)"
									>{{ row.is_default == 2 ? '设置默认' : '取消默认' }}</el-link
								>
								<el-link
									:underline="false"
									class="InfoFont"
									:style="{ color: row.status == 2 ? 'green' : 'var(--red1)' }"
									@click="changeStatus(row)"
									>{{ row.status == 2 ? '开启' : '停用' }}</el-link
								>
								<el-link :underline="false" type="info" class="InfoFont" @click="showList(row)">查看明细</el-link>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchtlementChannel, tlementSetDefaut, tlementSetStatus } from '@/api/talent.js'

export default {
	name: 'TalentContract',
	data() {
		return {
			url: common.url,
			ListData: [],

			total: 0,
			pageNum: 1,
			pageSizeNow: 20
		}
	},
	created() {
		// this.fetchTableData()
	},
	mounted() {},
	methods: {
		async fetchTableData() {
			try {
				let ret = await fetchtlementChannel({
					page: this.pageNum,
					pageSize: this.pageSizeNow
				})
				this.ListData = ret.list
				this.total = ret.count
			} catch (err) {
				// console.log(err)
			}
		},
		async changeDefault(row) {
			let ret = await this.$confirm(
				row.is_default == 2 ? '确认要将该结算通道设置为默认吗？' : '确认要将该结算通道设置为不默认吗？',
				'提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}
			).catch(err => err)
			if (ret === 'cancel') return

			try {
				await tlementSetDefaut({
					sn: row.sn,
					is_default: 3 - row.is_default
				})
				this.$message.success('操作成功！')
				this.fetchTableData()
			} catch (err) {
				console.log(err)
			}
		},
		async changeStatus(row) {
			let ret = await this.$confirm(row.status == 1 ? '确认要停用该结算通道吗？' : '确认要开启该结算通道吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).catch(err => err)
			if (ret === 'cancel') return

			try {
				await tlementSetStatus({
					sn: row.sn,
					status: 3 - row.status
				})
				this.$message.success('操作成功！')
				this.fetchTableData()
			} catch (err) {
				console.log(err)
			}
		},
		showList(row) {
			const { href } = this.$router.resolve({
				path: '/recordList',
				query: {
					settlement_channel_sn: row.sn
				}
			})
			window.open(href, '_blank')
		},
		toEdit(row) {
			this.$router.push({
				path: '/channelEdit',
				query: {
					sn: row.sn
				}
			})
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.fetchTableData()
		}
	}
}
</script>

<style scoped></style>



// WEBPACK FOOTER //
// src/components/talentSettlement/SettlementChannel.vue